<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Metrology</title>
    <!-- Bootstrap -->
    <link href="{{ url_for('static', filename = 'css/bootstrap.min.css', _external = True) }}" rel="stylesheet">
    <link href="{{ url_for('static', filename = 'css/bootstrap-theme.min.css', _external = True) }}" rel="stylesheet">
    <style>
        html, body {
            min-height: 100%;
        }

        .ptb15 {
            padding-top: 15px;
            padding-bottom: 15px;
        }

        .pageGlobal {
            background-color: #fff;
        }

        .axis--y .tick line {
            stroke-opacity: .15;
        }

        .pageGlobal .tabPanel {
            padding-top: 15px;
            padding-bottom: 15px;
            overflow-x: hidden;
            overflow-y: auto;
        }

        .tabPanel .tab-content {
            border: 1px solid #ddd;
            border-top-color: transparent;
        }

        /*
                .tabPanel .tab-pane {
                    overflow: hidden;
                }
        */
        .pt12 {
            padding-top: 12px;
        }

        .pic {
            max-width: 100%;
        }

        .pageGlobalOuterBackground {
            background-color: #f2f2f2;
            background-image: -moz-linear-gradient(top, #dff2f3 0, #dcecf0 50%, #dde4eb 100%);
            background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #dff2f3), color-stop(50%, #dcecf0), color-stop(100%, #dde4eb));
            background-image: -webkit-linear-gradient(top, #dff2f3 0, #dcecf0 50%, #dde4eb 100%);
            background-image: -ms-linear-gradient(top, #dff2f3 0, #dcecf0 50%, #dde4eb 100%);
            background-image: linear-gradient(to bottom, #dff2f3 0, #dcecf0 50%, #dde4eb 100%);
            background-image: -moz-linear-gradient(top, #2da9b1 0, #178299 50%, #1a4c7d 100%);
            background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2da9b1), color-stop(50%, #178299), color-stop(100%, #1a4c7d));
            background-image: -webkit-linear-gradient(top, #2da9b1 0, #178299 50%, #1a4c7d 100%);
            background-image: -ms-linear-gradient(top, #2da9b1 0, #178299 50%, #1a4c7d 100%);
            background-image: linear-gradient(to bottom, #2da9b1 0, #178299 50%, #1a4c7d 100%)
        }

        .bRadioGroup {
            line-height: 1.2em;
            margin-right: 10px;
        }

        .bRadioGroup .bRadioText {
            float: left;
            border: 1px solid #333;
            padding: 12px;
        }

        .bRadioGroup .bRadioBone {
            float: left;
            display: inline-block;
            padding: 8px;
        }

        .bRadioGroup .bRadio {
            width: 30px;
            height: 30px;
        }
    </style>
</head>
<body class="pageGlobalOuterBackground">
<div class="container pageGlobal" id="fixedPage">
    <div class="tabPanel" id="tabPanel">
        <ul class="nav nav-tabs" role="tablist" id="tabList">
            <li role="presentation" class="active"><a href="#tab0" aria-controls="tab0" role="tab" data-toggle="tab">Metrology</a>
            </li>
            <li role="presentation"><a href="#tab1" aria-controls="tab1" role="tab" data-toggle="tab">IPS-T</a></li>
            <li role="presentation"><a href="#tab2" aria-controls="tab2" role="tab" data-toggle="tab">IPS-L</a></li>
            <li role="presentation"><a href="#tab3" aria-controls="tab3" role="tab" data-toggle="tab">IPS-Q</a></li>
        </ul>
        <div class="tab-content" id="tabContent">
            <div role="tabpanel" class="tab-pane fade in active" id="tab0">
                <div class="ptb15">
                    <form class="form-horizontal">
                        <div class="row">
                            <div class="col-md-8">
                                <div class="col-md-6 pt12">
                                    <label for="modelSelector" class="col-sm-6 control-label">Model</label>
                                    <div class="col-sm-6">
                                        <select class="form-control" name="model" id="modelSelector">
                                            <option value="G38">G38</option>
                                            <option value="G38">G39</option>
                                            <option value="G38">G40</option>
                                            <option value="G38">G41</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6 pt12">
                                    <label for="reportSelector" class="col-sm-6 control-label">Last Reports</label>
                                    <div class="col-sm-6">
                                        <select class="form-control" name="model" id="reportSelector">
                                            <option value="16">16</option>
                                            <option value="17">17</option>
                                            <option value="18">18</option>
                                            <option value="19">19</option>
                                            <option value="20">20</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6 pt12">
                                    <label for="areaSelector" class="col-sm-6 control-label">Area</label>
                                    <div class="col-sm-6">
                                        <select class="form-control" name="model" id="areaSelector">
                                            <option value="B-Pillar">B-Pillar</option>
                                            <option value="B-Pillar">C-Pillar</option>
                                            <option value="B-Pillar">D-Pillar</option>
                                            <option value="B-Pillar">E-Pillar</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6 pt12">
                                    <label for="carNumSelector" class="col-sm-6 control-label">Car No.</label>
                                    <div class="col-sm-6">
                                        <select class="form-control" name="model" id="carNumSelector">
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6 pt12">
                                    <label for="featureSelector" class="col-sm-6 control-label">Feature</label>
                                    <div class="col-sm-6">
                                        <select class="form-control" name="model" id="featureSelector">
                                            <option value="16">L8653</option>
                                            <option value="17">L8654</option>
                                            <option value="18">L8655</option>
                                            <option value="19">L8656</option>
                                            <option value="20">L8657</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-12 pt12">
                                    <label class="bRadioGroup clearfix">
                                        <div class="bRadioText">Press<br/>Part</div>
                                        <div class="bRadioBone">
                                            <input class="bRadio" name="radio" type="radio">
                                        </div>
                                    </label>
                                    <label class="bRadioGroup clearfix">
                                        <div class="bRadioText">BS<br/>FMK</div>
                                        <div class="bRadioBone">
                                            <input class="bRadio" name="radio" checked type="radio">
                                        </div>
                                    </label>
                                    <label class="bRadioGroup clearfix">
                                        <div class="bRadioText">BS<br/>MF</div>
                                        <div class="bRadioBone">
                                            <input class="bRadio" name="radio" type="radio">
                                        </div>
                                    </label>
                                    <label class="bRadioGroup clearfix">
                                        <div class="bRadioText">BS<br/>Audit</div>
                                        <div class="bRadioBone">
                                            <input class="bRadio" name="radio" type="radio">
                                        </div>
                                    </label>
                                    <label class="bRadioGroup clearfix">
                                        <div class="bRadioText">AS<br/>&nbsp;</div>
                                        <div class="bRadioBone">
                                            <input class="bRadio" name="radio" type="radio">
                                        </div>
                                    </label>
                                    <label class="bRadioGroup clearfix">
                                        <div class="bRadioText">Quality<br/>ATG</div>
                                        <div class="bRadioBone">
                                            <input class="bRadio" name="radio" type="radio">
                                        </div>
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="col-md-12">
                                    <img class="pic"
                                         src="{{ url_for('static', filename = 'images/Picture2.png', _external = True) }}">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-8">
                                <div class="col-md-12">
                                    <svg id="svgStage"></svg>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="col-md-12 text-center" style="margin-top: 40px">
                                    <img class="pic"
                                         src="{{ url_for('static', filename = 'images/Picture1.png', _external = True) }}">
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div role="tabpanel" class="tab-pane fade" id="tab1">
                <iframe class="fullTabPanel" data-src="http://lixtix0dngapi01/demo/d3_chart.html" width="100%" height="100%"
                        frameborder="0"></iframe>
            </div>
            <div role="tabpanel" class="tab-pane fade" id="tab2">
                <iframe class="fullTabPanel" data-src="http://lixtix0dngapi01/gline?line_name=G6" width="100%" height="100%"
                        frameborder="0"></iframe>
            </div>
            <div role="tabpanel" class="tab-pane fade" id="tab3">
                <iframe class="fullTabPanel" data-src="http://lixtix0dngapi01/gline?line_name=Z6" width="100%" height="100%"
                        frameborder="0"></iframe>
            </div>
        </div>
    </div>
</div>
<script src="{{ url_for('static', filename = 'js/libs/jquery-3.1.1.min.js', _external = True) }}"></script>
<script src="{{ url_for('static', filename = 'js/libs/lodash.core.min.js', _external = True) }}"></script>
<script src="{{ url_for('static', filename = 'js/libs/d3.min.js', _external = True) }}"></script>
<script src="{{ url_for('static', filename = 'js/libs/bootstrap.min.js', _external = True) }}"></script>

<script>
    (function ($) {
        $(function () {
            var winHt = $(window).height();
            $('#fixedPage').css('min-height', winHt);
            var tabContentHt = winHt - parseInt($('#tabPanel').css('padding-top')) - parseInt($('#tabPanel').css('padding-bottom')) - $('#tabPanel').find('.nav-tabs').height();
            var tabPanelHt = parseInt(tabContentHt - 3);
            $('#tabContent').css('min-height', tabPanelHt + 'px');

            $('.fullTabPanel').css({
                'border': '0 none',
                'height': tabPanelHt + 'px',
                'display': 'block'
            });
        });

        $('#tabList a').on('click', function () {
            var $this = $(this),
                idStr = $this.attr('href'),
                $tabPanel = $(idStr),
                $frame = $tabPanel.find('iframe');
            if(!$frame.attr('src')) {
                $frame.attr('src', $frame.data('src'));
            }
        });

        var svgStageWidth = $('#svgStage').parent().width();

        var options = {
            width: svgStageWidth,
            height: 267,
            boxMarginTop: 40,
            boxMarginLeft: 0,
            boxWidth: svgStageWidth,
            boxHeight: 267,
            graphMarginTop: 10,
            graphMarginLeft: 30,
            axisHeight: 192,
            grid: [
                {
                    show: true,
                    tx: 0,
                    ty: 0,
                    width: svgStageWidth - 60
                }
            ],
            xAxis: [{
                gridIndex: 0,
                z: 2,
                axisLine: {
                    lineStyle: {
                        width: 1
                    }
                },
                axisLabel: {
                    "interval": 0,
                    "rotate": 90,
                    "show": true,
                    "textStyle": {
                        "fontSize": 12
                    }
                },
                data: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16"]
            }],
            yAxis: [{
                gridIndex: 0,
                z: 2,
                axisTick: {
                    show: true
                },
                axisLine: {
                    show: true
                },
                splitLine: {
                    lineStyle: {
                        color: '#E8ECF1',
                        width: 1
                    }
                },
                min: 0,
                max: 24
            }],
            series: [{
                name: 'Year',
                type: 'line',
                xAxisIndex: 0,
                yAxisIndex: 0,
                itemStyle: {
                    color: '#f00'
                },
                data: [-2.58, -0.63, -2.08, -1.51, -1.38, -2.13, -2.34, -1.5, -1.69, -0.62, -1.11, -1.38, -1.44, -1.53, -1.2, -0.89]
            }]
        };

        var DChart = function (selector, opt) {
            this.selector = selector;
            this.options = opt;
            this.items = {}; // 缓存图片中的组件
            this.init();
            return this;
        };

        DChart.prototype.init = function () {
            this.chart = this.getCharView();
            this.drawChart();
        };

        DChart.prototype.drawChart = function () {
            var me = this,
                opt = this.options,
                gridData = opt.grid,
                items = this.items,
                chartView = this.chart,
                chartBox = items['chartBox'] = chartView
                    .append('g')
                    .attr("transform", "translate(" + opt['boxMarginLeft'] + "," + opt['boxMarginTop'] + ")");

            chartBox.append('rect')
                .attr('width', opt['boxWidth'])
                .attr('height', opt['boxHeight'])
                .style('fill', '#ecf0f1');

            items['chartGridLabel'] = chartBox
                .append('g')
                .attr("transform", "translate(" + opt['graphMarginLeft'] + "," + opt['graphMarginTop'] + ")");

            items['grids'] = []; // 缓存grid

            _.forEach(gridData, function (dv, dk) {
                me.drawAxis(dv, dk);
            });
            me.drawGraph();
        };

        DChart.prototype.drawAxis = function (obj, idx) {
            var opt = this.options,
                items = this.items,
                xItems = opt.xAxis,
                yItems = opt.yAxis,
                chartGridLabel = items['chartGridLabel'];
            var gridGroup = chartGridLabel.append('g')
                .attr('transform', 'translate(' + obj['tx'] + ',' + obj['ty'] + ')');
            items['grids'].push(gridGroup);

            var xItem = xItems[idx],
                yItem = yItems[idx],
                gridWidth = obj['width'],
                xData = xItem['data'];

            if (!items['xScale']) {
                items['xScale'] = {};
            }
            var x = items['xScale'][idx] = d3.scaleBand()
                .rangeRound([0, gridWidth]);

            var y = items['yScale'] = d3.scaleLinear()
                .rangeRound([opt['axisHeight'], 0]);

            x.domain(xData);
            y.domain([-4, 2]);

            var xAxis = d3.axisBottom(x);
            var xGroup = gridGroup.append('g')
                .attr('class', 'axis axis--x')
                .attr('transform', 'translate(0,' + opt['axisHeight'] + ')')
                .call(xAxis);

            if (xItem['textClass']) {
                xGroup.selectAll('text')
                    .attr('x', -10)
                    .attr('y', -2)
                    .attr('transform', 'rotate(-90)')
                    .attr('text-anchor', 'end');
            }

            if (!(yItem['axisLine'] && yItem['axisLine']['show'] === false)) {
                var yAxis = d3
                    .axisLeft(y)
                    .tickValues(y.ticks(6))
                    .tickFormat(d3.format(',.0f'))
                    .tickSize(-gridWidth);
                gridGroup.append('g')
                    .attr('class', 'axis axis--y')
                    .attr('transform', 'translate(-1, 0)')
                    .call(yAxis);
            }

            // 画参考线
            var refLinePath1 = gridGroup.append('path'),
                refLinePath2 = gridGroup.append('path');
            refLinePath1.datum(["0"].concat(xData))
                .attr('class', 'refLine1')
                .attr('d', d3.line().x(function (d, i) {
                    return x.bandwidth() * i;
                }).y(function () {
                    return y(1.2);
                }))
                .attr('stroke', 'blue')
                .attr('stroke-dasharray', '5, 10')
                .attr('stroke-width', 1);
            refLinePath2.datum(["0"].concat(xData))
                .attr('class', 'refLine2')
                .attr('d', d3.line().x(function (d, i) {
                    return x.bandwidth() * i;
                }).y(function () {
                    return y(-1.2);
                }))
                .attr('stroke', 'red')
                .attr('stroke-dasharray', '5, 10')
                .attr('stroke-width', 1);
        };

        DChart.prototype.drawGraph = function () {
            var opt = this.options,
                items = this.items,
                series = opt.series,
                xItems = opt.xAxis,
                chartItems = items['grids'];

            var barAccumer = {}; // bar 累加器
            var yScaleFun = items['yScale'],
                rowHeight = 20;
            _.forEach(series, function (obj, idx) {
                var xIdx = obj['xAxisIndex'],
                    xItem = xItems[xIdx],
                    xData = xItem['data'],
                    xScaleLen = xData.length,
                    chartItem = chartItems[xIdx],
                    xScaleFun = items['xScale'][xIdx],
                    barWidth = xScaleFun.bandwidth();
                if (obj['type'] == 'bar') {
                    var tmpArr = barAccumer[obj.name];
                    if (!tmpArr) {
                        var n = 0,
                            tmpArr = [];
                        for (n; n < xScaleLen; n++) {
                            tmpArr.push(0);
                        }
                    }
                    _.forEach(obj.data, function (ov, ok) {
                        tmpArr[ok] = parseInt(tmpArr[ok]) + parseInt(ov);
                    });

                    barAccumer[obj.name] = tmpArr;

                    chartItem.selectAll('.bar.bar' + idx)
                        .data(obj['data'])
                        .enter()
                        .append('rect')
                        .attr('class', 'bar bar' + idx)
                        .attr('x', function (d, i) {
//                            return xScaleFun(d);
                            var x = i * barWidth;
                            return x;
                        })
                        .attr('y', function (d, i) {
                            // y轴坐标起始值
                            var yLen = barAccumer[obj.name][i];
                            return yScaleFun(yLen);
                        })
                        .attr('width', barWidth - 1)
                        .attr("stroke-dashoffset", 0)
                        .transition()
                        .ease(d3.easeLinear)
                        .attr('height', function (d) {
                            return yScaleFun(24 - d);
                        })
                        .attr('fill', obj['itemStyle']['color']);
                }
                else if (obj['type'] == 'line') {

                    _.forEach(obj.data, function (ov, ok) {
                        if (obj.rowNum) {
                            if (ov < 10) {
                                ov = parseFloat(ov).toFixed(2);
                            }
                            tableGroup.append('text')
                                .attr('x', ok * barWidth + (barWidth / 2))
                                .attr('y', obj.rowNum * rowHeight - 8)
                                .text(ov)
                                .attr('alignment-baseline', 'middle')
                                .attr('font-size', '10px')
                                .attr('fill', '#333')
                                .style('text-anchor', 'middle')
                                .style('font-weight', 'bold')
                                .style('font-family', '"Arial","Microsoft YaHei"');
                        }
                    });

                    var lineFun = d3.line().x(function (d, i) {
                        return i * barWidth + barWidth / 2;
                    }).y(function (d) {
                        return yScaleFun(d);
                    });

                    var linePath = chartItem.append('path');

                    linePath.datum(obj['data'])
                        .attr('class', 'line')
                        .attr('d', lineFun)
                        .attr('stroke-width', 2);
                    var totalLength = linePath.node().getTotalLength();

                    linePath.attr("stroke-dasharray", totalLength + " " + totalLength)
                        .attr("stroke-dashoffset", totalLength)
                        .transition()
                        .ease(d3.easeLinear)
                        .duration(1000)
                        .attr("stroke-dashoffset", 0)
                        .attr('fill', 'none')
                        .attr('stroke', obj['itemStyle']['color']);

                    linePath.on('mouseover', function () {
                        var $me = d3.select(this),
                            defStroke = $me.attr('stroke');
                        $me.attr('def-stroke', defStroke);
                        $me.attr('stroke', 'yellow');
                        $me.attr('stroke-width', 3);
                    }).on('mouseout', function () {
                        var $me = d3.select(this),
                            defStroke = $me.attr('def-stroke');
                        $me.attr('stroke', defStroke);
                        $me.attr('stroke-width', 2);
                    });

                    var linePointGroup = chartItem.selectAll('.circle.circle' + idx)
                        .data(obj['data'])
                        .enter().append('g');

                    var linePoint = linePointGroup.append('circle');
                    linePoint.attr('class', 'circle circle' + idx)
                        .attr('cx', function (d, i) {
                            return i * barWidth + barWidth / 2;
                        })
                        .attr('cy', function (d) {
                            return yScaleFun(d);
                        })
                        .attr('r', 3)
                        .attr('stroke', obj['itemStyle']['color'])
                        .attr('stroke-width', 1)
                        .attr('fill', '#fff');

                    linePointGroup.append('text').text(function (d) {
                        return d;
                    }).attr('x', function (d, i) {
                        return i * barWidth + barWidth / 2;
                    }).attr('y', function (d) {
                        return yScaleFun(d);
                    }).attr('dx', '-1.8em')
                        .attr('dy', '1.8em')
                        .style('font-size', '10')
                        .style('font-weight', 100)
                        .style('fill', '#c33');

                    linePoint.on('mouseover', function () {
                        var $me = d3.select(this),
                            defFill = $me.attr('fill'),
                            defR = $me.attr('r');
                        $me.attr('def-fill', defFill);
                        $me.attr('fill', 'yellow');
                        $me.attr('def-r', defR);
                        $me.attr('r', 5);
                    }).on('mouseout', function () {
                        var $me = d3.select(this),
                            defFill = $me.attr('def-fill'),
                            defR = $me.attr('def-r');
                        $me.attr('fill', defFill);
                        $me.attr('r', defR);
                    });
                }
            });
        };

        DChart.prototype.getCharView = function () {
            var opt = this.options,
                chartView = d3.select(this.selector)
                    .attr("class", "chart")
                    .attr('width', opt.width)
                    .attr('height', opt.height);
            return chartView;
        };

        new DChart('#svgStage', options);
    })(jQuery);
</script>
</body>
</html>